<template>
	<view>
		<view class="filters">
			<text>日历选择: {{ params.month }}</text>
			<picker mode="date" :value="params.month" fields="month" @change="bindDateChange">
				<uni-icons class="icon" type="calendar-filled" size="25"></uni-icons>
			</picker>
		</view>
		<uni-card class="card" v-for="item in tableData" :key="item.id">
			<template v-slot:title>
				<view class="card-header">
					<view class="left"><uni-icons type="vip-filled" size="36" color="#B10D0C"></uni-icons></view>
					<view class="center">{{ item.name }}</view>
					<view>{{ item.statusName }}</view>
				</view>
			</template>
			<view class="content">
				<div>运营商：{{ item.operator }}</div>
				<div>手机号：{{ item.phone }}</div>
				<div>工号: {{ item.workCode }}</div>
				<div>首充：{{ item.firstRecharge }}</div>
			</view>
			<view class="time">
				<text>提交时间：{{ item.createTime }}</text>
				<button class="btn" @click="handleOrder(item)">再次申请</button>
			</view>
		</uni-card>
		<view class="loadingLayout" v-if="noData || tableData.length">
			<uni-load-more :status="noData ? 'noMore' : 'loading'" />
		</view>
		<uni-fab v-if="!isFinish" :pattern="pattern" horizontal="left" vertical="bottom" direction="horizontal"
			:popMenu="false" @fabClick="fabClick" />
	</view>
</template>

<script setup>
import { onShow, onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app"
import { myOrder, checkSure, reAdd } from "@/api/order"
import { ref } from 'vue'

const params = ref({
	pageNo: 1,
	pageSize: 3,
	// 当前年月
	month: `${new Date().getFullYear()}` + '-' + `${new Date().getMonth() + 1}`,
	status: 2
})  // 请求参数
const tableData = ref([])  // 订单列表数据
const noData = ref(false); // 判断是否有数据
const isFinish = ref(true) // 判断是否核对过的数据
// 请求数据
const getTableData = (flag) => {
	myOrder(params.value).then(res => {
		tableData.value = [...tableData.value, ...res.data.pageData]
		noData.value = tableData.value.length >= res.data.total;
		flag && uni.stopPullDownRefresh()
	})
}
// 刷新数据
const onRefresh = () => {
	params.value.pageNo = 1
	params.value.pageSize = 3
	tableData.value = []
	getTableData(true)
}
// 触底加载更多
onReachBottom(() => {
	if (noData.value) return;
	params.value.pageNo++
	getTableData()
})
// 下拉刷新
onPullDownRefresh(() => {
	onRefresh()
})
// 日期选择筛选
const bindDateChange = (e) => {
	params.value.month = e.detail.value
	checkIsFinish()
	onRefresh()
}
// 页面显示
onShow(() => {
	checkIsFinish()
	getTableData()
})
// 核对按钮
const pattern = {
	color: '#7A7E83',
	backgroundColor: '#fff',
	selectedColor: '#B10D0C',
	buttonColor: '#B10D0C',
	iconColor: '#fff',
	icon: 'checkbox-filled'
}
// 判断是否需要核对(onshow的时候、切换月份的时候需要调用)
const checkIsFinish = () => {
	checkSure({
		month: params.value.month,
		type: params.value.status
	}).then(res => {
		isFinish.value = res.data
	})
}
// 核对按钮点击
const fabClick = () => {
	uni.showModal({
		title: '提示',
		content: `${params.value.month}的订单确认无误？`,
		success: (res) => {
			if (res.confirm) {
				sure({
					month: params.value.month,
					type: params.value.status
				}).then(res => {
					uni.showToast({
						title: '核对成功',
						icon: 'success',
						success: setTimeout(() => {
							onRefresh()
						}, 1000)
					})
				})
			}
		}
	})
}
// 再次申请
const handleOrder = (item) => {
	uni.showModal({
		title: '提示',
		content: `确定再次申请${item.name}的订单？`,
		success: (res) => {
			if (res.confirm) {
				reAdd({
					id: item.id
				}).then(res => {
					uni.showToast({
						title: '申请成功',
						icon: 'success',
						success: setTimeout(() => {
							onRefresh()
						}, 1000)
					})
				})
			}
		}
	})
}
</script>

<style lang="scss" scoped>
::v-deep .uni-card {
	border-radius: 20rpx !important;
}

.filters {
	height: 50rpx;
	padding: 0 25rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.card {
	.card-header {
		height: 100rpx;
		display: flex;
		align-items: center;
		padding: 0 25rpx;
		border-bottom: 1px #ebeef5 solid;

		.center {
			margin-left: 30rpx;
			font-size: 42rpx;
			flex: 1;
		}

		.right {
			color: $brand-theme-color;
		}
	}

	.content {
		color: #171515;
		min-height: 150rpx;
		font-size: 48rpx;
		line-height: 60rpx;
	}

	.time {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		font-size: 26rpx;

		.btn {
			height: 58rpx;
			font-size: 26rpx;
			background: $brand-theme-color;
			border-radius: 20rpx;
			color: #fff;
			line-height: 58rpx;
		}
	}
}
</style>
